/*
 * @Description: 选择目标案卷弹窗
 * @Author: Zzt
 * @Date: 2022-11-01 15:49:29
 * @LastEditTime: 2022-11-02 20:23:40
 */

import { fetchArchivesLevelWithPage } from '@/api/archives/archives';
import { Modal, Row, Col, Input, Space, Table } from 'antd';
import Column from 'antd/es/table/Column';
import { useEffect, useState } from 'react';
import { useLevelTableContext } from '../../contexts/LevelTableContext';
const { Search } = Input;
const TransferFilesDialog = (props: any) => {
  const { baseInfo, goOtherFolder } = useLevelTableContext();
  const { visible, onClose, selectItems } = props;
  const [transferList, setTransferList] = useState([]);
  // 表格选中的项目
  const [selectItem, setSelectKey] = useState([]);
  const [loading, setLoading] = useState(false);
  const [listQuery, setListQuery] = useState({
    pageNo: 1,
    pageSize: 10
  });
  const [total, setTotal] = useState(0);
  /* 切换页码查找列表 */
  useEffect(() => {
    if (listQuery) {
      const param = {
        atCode: baseInfo.atCode,
        atType: baseInfo.atType,
        commonParams: baseInfo.param.commonParams,
        level: 2
      };
      setLoading(true);
      fetchArchivesLevelWithPage({ ...listQuery, param }).then((res) => {
        const { data } = res;
        setTotal(data?.totalCount);
        const { results } = data;
        setTransferList(results.data);
      });
    }
  }, [listQuery]);
  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };
  const onSearch = (value: string) => console.log(value);
  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };
  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItem,
    onChange: onSelectChange
  };

  const handleOk = () => {
    const params = {
      atCode: baseInfo.atCode,
      atType: baseInfo.atType,
      commonParams: baseInfo.param.commonParams,
      sourceEntryIdList: selectItems,
      targetEntryId: selectItem[0]
    };
    goOtherFolder(params, selectItem);
    onClose();
  };
  return (
    <>
      <Modal visible={visible} title="选择目标案卷" onOk={handleOk} onCancel={onClose} width={600}>
        <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
          <Row>
            <Col span={4}>
              <b>已选文件</b>
            </Col>
            <Col>您已选择{selectItems?.length}个文件，在以下选择所需案卷进行调整移动操作</Col>
          </Row>
          <Row wrap={false}>
            <Col span={6}>
              <b>请选择目标案卷</b>
            </Col>
            <Col>
              <Search
                placeholder="输入案卷档号或题名"
                allowClear
                enterButton="查询"
                onSearch={onSearch}
              />
            </Col>
          </Row>
          <Table
            size="small"
            rowKey="id"
            dataSource={transferList}
            bordered
            rowSelection={{ type: 'radio', ...rowSelection }}
            pagination={{
              current: listQuery.pageNo,
              pageSize: listQuery.pageSize,
              total,
              onChange: pageChange
            }}
          >
            <Column title="序列号" dataIndex="id" key="id" />
            <Column title="档号" dataIndex="arcno" key="arcno" />
            <Column title="题名" dataIndex="title" key="title" />
            <Column title="案卷号" dataIndex="fileNo" key="fileNo" />
            <Column title="件数" dataIndex="number" key="number" />
          </Table>
        </Space>
      </Modal>
    </>
  );
};
export default TransferFilesDialog;
